<template>
  <div>
    <!-- <h3>当前最新的count值为：{{ $store.state.count }}</h3> -->
    <h3>{{ $store.getters.showNum }}</h3>
    <button @click="handlerAdd">+1</button>
    <button @click="handlerAddN">+2</button>
    <button @click="handlerAddAsync">addAsync+1</button>
    <button @click="handlerAddAsyncN">addAsync+2</button>
  </div>
</template>

<script>
export default {
  data () {
    return { }
  },
  methods:{
    handlerAdd(){
      // commit的作用就是调用某个Mutations函数
      this.$store.commit('add')
    },
    handlerAddN(){
      this.$store.commit('addN', 2)
    },
    handlerAddAsync(){
      // dispath的作用就是调用某个Actions函数
      this.$store.dispatch('addAsync')
    },
    handlerAddAsyncN(){
      this.$store.dispatch('addAsyncN', 2)
    }
  }
}
</script>
